// 微客要求
<template>

    <div>
        <div class="radius-container" v-if="isShow =='1'">
            <div class="border-b pad-10 font-w font-15 topbar-style">微客要求</div>
            <div class="pad-20">
                <el-form :model="form" label-width="135px" :rules="rules">
                    <!-- 筛选合作的微客 -->
                    <div class="flex v-align-c">
                      <el-switch v-model="form.cooperationFlag" class="mar-l-20"></el-switch>
                      <el-form-item label="筛选合作的微客：" class="mar-b-0">
                        <div class="flex">
                          <el-popover
                          placement="top-start"
                          title="说明"
                            width="200"
                            trigger="hover"
                              class="mar-l--10 pad-r-15"
                              content="选择推送范围：根据你的选择把任务推送给你选择的微客类型；定向选择微客：任务只推送给你选择的微客">
                            <svg-icon slot="reference" class="questionCircle mar-t-8" icon-class="questionCircle" />
                          </el-popover>
                          <el-form-item label="" v-if="form.cooperationFlag">
                              <el-radio-group v-model="form.cooperationFilterType">
                                  <template v-for="type in cooperationFilterTypeTypes">
                                      <el-radio :label="type.key">{{type.value}}</el-radio>
                                  </template>
                              </el-radio-group>
                          </el-form-item>
                        </div>
                      </el-form-item>
                    </div>
                    <!-- 是否招募新微客 -->
                    <el-row v-if="form.cooperationFlag">
                        <el-form-item label-width="195px" label="" v-if="form.cooperationFilterType==1">
                            <el-radio-group v-model="form.filterDirectionType" class="pad-l-25">
                                <template v-for="type in filterDirectionTypeTypes">

                                        <el-radio :label="type.key">{{type.value}}</el-radio>
                                        <!-- 0：只推送公共微客 -->
                                        <el-popover v-if="type.key == 0"
                                                    placement="top-start"
                                                    title="说明"
                                                    width="200"
                                                    trigger="hover"
                                                    class="pad-l-5 pad-r-25"
                                                    content="项目只推给公共微客">
                                            <svg-icon slot="reference" class="questionCircle" icon-class="questionCircle" />
                                        </el-popover>

                                        <!-- 1：只推送外部微客 -->
                                        <el-popover v-if="type.key == 1"
                                                    placement="top-start"
                                                    title="说明"
                                                    width="200"
                                                    trigger="hover"
                                                    class="pad-l-5 pad-r-25"
                                                    content="项目只推给公司招募员招募的，且有绑定关系的微客">
                                            <svg-icon slot="reference" class="questionCircle" icon-class="questionCircle" />
                                        </el-popover>
                                        <!-- popover提示框 结束 -->
                                        <!-- 2：只推送内部微客  -->
                                        <el-popover v-if="type.key == 2"
                                                    placement="top-start"
                                                    title="说明"
                                                    width="200"
                                                    trigger="hover"
                                                    class="pad-l-5 pad-r-25"
                                                    content="项目只推给公司内部在职的内部创客。">
                                            <svg-icon slot="reference" class="questionCircle" icon-class="questionCircle" />
                                        </el-popover>
                                        <!-- popover提示框 结束 -->
                                        <!-- 2：只推送内部微客  -->
                                        <el-popover v-if="type.key == 3"
                                                    placement="top-start"
                                                    title="说明" width="200"
                                                    trigger="hover"
                                                    class="pad-l-5 pad-r-25"
                                                    content="项目将推给公司的内部创客，和招募员招募且有绑定关系的微客">
                                            <svg-icon slot="reference" class="questionCircle" icon-class="questionCircle" />
                                        </el-popover>
                                        <!-- popover提示框 结束 -->
                                    </template>

                            </el-radio-group>
                        </el-form-item>
                    </el-row>

                    <el-row v-if="form.cooperationFlag">
                        <el-col :span="24">
                            <el-form-item label-width="195px" label="选择推送：" v-if="form.cooperationFilterType==2">
                                <el-input type="textarea" :rows="5"
                                 placeholder="请输入内容" class="pad-t-12 pad-l-25"
                                  style="width: 50%" v-model="selectPushMemberNames"/>
                                <el-button type="primary" size="mini" class="mar-l-15" @click="selectPushMember()">选择微客</el-button>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label-width="195px" label="" v-if="form.cooperationFilterType==3">
                                <el-select v-model="provinceCode" filterable placeholder="请选择省份" @change = "changeProvince()">
                                    <el-option v-for="item in provinceList" :key="item.areaCode"
                                            :label="item.areaName" :value="item.areaCode">
                                    </el-option>
                                </el-select>

                                <el-select v-model="cityCode" filterable placeholder="请选择城市">
                                    <el-option v-for="item in useCityList" :key="item.areaCode"
                                               :label="item.areaName" :value="item.areaCode">
                                    </el-option>
                                </el-select>

                            </el-form-item>
                        </el-col>

                    </el-row>
                    <div class="flex v-align-c flex-area" :class="form.recruitFlag?'area-height':''">
                      <el-switch v-model="form.recruitFlag" class="mar-l-20"></el-switch>
                      <el-form-item label="是否招募新微客：" class="mar-b-0">
                            <div class="flex v-align-c mar-t--3">
                                <div class="pad-t-5 mar-l--15 mar-r--10">
                                    <el-popover
                                            placement="top-start"
                                            title="说明："
                                            width="200"
                                            trigger="hover"
                                            class="pad-l-5 pad-r-25"
                                            content="选择招募后，公司相关的招募员将收到招募海报信息。不选择招募后，公司招募员将不会收到招募海报信息。">
                                        <svg-icon slot="reference" class="questionCircle inline-block" icon-class="questionCircle" />
                                    </el-popover>
                                </div>
                            </div>
                        </el-form-item>
                        <div v-if="form.recruitFlag" class="area-box">
                          <el-input type="textarea" :rows="3" placeholder="请输入内容"  style="width: 38%" v-model="selectRecruiterNames"/>
                          <el-button type="primary" size="mini" class="mar-l-15" @click="selectRecruiter">选择招募员</el-button>
                        </div>
                    </div>


                    <div class="flex v-align-c flex-area" >
                        <el-switch v-model="form.onceSign" class="mar-l-20"></el-switch>
                        <el-form-item label="是否单次签约：" class="mar-b-0">
                            <div class="flex v-align-c mar-t--3">
                                <div class="pad-t-5 mar-l--15 mar-r--10">
                                    <el-popover
                                            placement="top-start"
                                            title="说明："
                                            width="200"
                                            trigger="hover"
                                            class="pad-l-5 pad-r-25"
                                            content="● 启用：企业选择微客后，如果微客有确认签约服务协议一次之后就无需再确认。
                                                     ● 不启用：企业选择微客后，微客需要确认签约才算正式录用。">
                                        <svg-icon slot="reference" class="questionCircle inline-block" icon-class="questionCircle" />
                                    </el-popover>
                                </div>
                            </div>
                        </el-form-item>
                    </div>

                </el-form>

            </div>
        </div>

        <div>
            <!-- 选择招募微客 -->
            <el-dialog width="700px"  v-el-drag-dialog :visible.sync="recruiterDialog" center >
                <div class="flex pad-l-30 mar-t-30">
                    <div class="mar-l-5">
                        <el-transfer
                                style="text-align: left; display: inline-block"
                                v-model="recruiterValues"
                                filterable
                                :left-default-checked="[]"
                                :right-default-checked="recruiterRightValues"
                                :titles="['可选招募员', '已选招募员']"
                                :button-texts="['去除', '添加']"
                                :format="{
                                    noChecked: '${total}',
                                    hasChecked: '${checked}/${total}'
                                  }"
                                :data="recruiterDatas">
                        </el-transfer>
                    </div>
                    <br>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeRecruiter">取消</el-button>
                    <el-button type="primary" @click="submitRecruiter">确定</el-button>
                </div>
            </el-dialog>
        </div>

        <div>
            <el-dialog width="700px"  v-el-drag-dialog :visible.sync="pushMemberDialog" center >
                <div class="flex pad-l-30 mar-t-30">
                    <!--</div>-->
                    <div class="mar-l-5">
                        <el-transfer
                                style="text-align: left; display: inline-block"
                                v-model="pushMemberValues"
                                filterable
                                :left-default-checked="[]"
                                :right-default-checked="pushMemberRightValues"
                                :titles="['可选微客', '已选微客']"
                                :button-texts="['去除', '添加']"
                                :format="{
                                    noChecked: '${total}',
                                    hasChecked: '${checked}/${total}'
                                  }"
                                :data="pushMemberDatas">
                        </el-transfer>
                    </div>
                    <br>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closePushMember">取消</el-button>
                    <el-button type="primary" @click="submitPushMember">确定</el-button>
                </div>

            </el-dialog>
        </div>
    </div>

</template>

<style lang="less" scoped>
    .flex-area{
      position: relative;
      .area-box{
        position: absolute;
        width: 100%;
        left: 218px;
        top: 10px;
      }
    }
    .area-height{
      padding-bottom: 60px;
    }
    .flag-box{
      padding-left: 70px;
    }
    .el-input{
        width:20%
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .main-transfer {
        width: 200px;
    }

    .main-transfer-title {
        background-color: #f5f7fa;
        height: 40px;
        font-size: 16px;
        padding-left: 20px;
    }

    .main-transfer-list {
        height: 260px;
        overflow-y: scroll;
    }

</style>

<script>
  import { getDictByGroupName } from '@/api/common/common'
  import { listRecruiterList, listPushMemberList } from '@/api/project/taskInfo'
  import { dealDict } from '@/utils/select'
  export default {
    props: ['dict'],
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        form: {
          cooperationFlagType: '0',
          cooperationFilterType: '1',
          experienceIds: [],
          skillIds: [],
          bargainingFlagMap: {}, // ????
          filterDirectionType: '1',
          recruitFlagType: '0',
          cooperationFlag: false,
          recruitFlag: false,
          onceSign: false
        },
        hireNum: '',
        payDay1: '',
        payDay2: '',

        cooperationFilterTypeTypes: [],
        cooperationFilterTypeMap: {},
        // 是否启用合作微客
        cooperationFlagTypeTypes: [],
        cooperationFlagTypeMap: {},
        filterDirectionTypeTypes: [],
        filterDirectionTypeMap: {},
        // 招募弹窗 Id
        recruiterDialog: false,
        // 所选类目集合
        recruiterValues: [],
        // 右侧选中
        recruiterRightValues: [],
        // 招募员集合
        recruiterDatas: [],
        // 选择的招募员Id
        selectRecruiterIds: [],
        // 招募员Map
        recruiterMap: new Map(),
        // 使用的名称集合
        selectRecruiterNames: '',
        // 招募员Id集合
        recruitMemberIds: [],
        // 招募弹窗 Id
        pushMemberDialog: false,
        // 所选类目集合
        pushMemberValues: [],
        // 右侧选中
        pushMemberRightValues: [],
        // 选择推送微客集合
        pushMemberDatas: [],
        // 选择推送微客Id
        selectPushMemberIds: [],
        // 选择推送微客Map
        pushMemberMap: new Map(),
        // 微客使用的名称集合
        selectPushMemberNames: '',
        // 微客Id集合
        pushMemberIds: [],
        rules: {
        },
        isShow: '1',
        provinceList: [],
        cityList: [],
        useCityList: [],
        provinceCode: '',
        cityCode: ''
      }
    },
    // 初始化页面
    created() {
      console.log('require')
      this.initDict()
      this.initAreaList()
    },
    mounted() {
      // 初始化数据
      this.busListener()
      this.initlistRecruiterList()
      this.initListPushMemberList()
    },
    methods: {
      initDict() {
        getDictByGroupName('TaskInfoDTO').then(response => {
          // 动态生成字典放入集合中
          const dictObj = dealDict(response.data)
          Object.keys(dictObj).forEach(key => {
            this[key + ''] = dictObj[key + '']
          })
          // 动态生成字典Map,页面显示使用
          Object.keys(response.data).forEach((name) => {
            const key = name + 'Map'
            const value = response.data[name]
            this[key] = value
          })
        })
      },
      changeProvince() {
        this.changeCity()
        this.cityCode = ''
      },
      changeCity() {
        const provinceList = this.provinceList
        const provinceCode = this.provinceCode
        let provinceId = null
        provinceList.filter(province => {
          if (province.areaCode === provinceCode) {
            provinceId = province.areaId
            return true
          }
        })
        const cityList = this.cityList
        const newArr = []
        cityList.forEach(city => {
          const parentId = city.parentId
          if (parentId === provinceId) {
            newArr.push(city)
          }
        })
        // this.provinceCode = provinceCode
        this.useCityList = newArr
      },
      busListener(taskData) {
        const that = this
        this.$bus.$on('project.task.edit.taskData', function(data) {
          // 是否启用 筛选合作的微客
          that.form.cooperationFlagType = data.cooperationFlag + ''
          // 筛选合作微客类型
          that.form.cooperationFilterType = !data.cooperationFilterType ? '1' : data.cooperationFilterType + ''
          if (that.form.cooperationFlagType === '1') {
            that.form.cooperationFlag = true
            const cooperationFilterType = !data.cooperationFilterType ? '1' : data.cooperationFilterType + ''
            if (cooperationFilterType === '2') {
              const directionMemberIds = data.directionMemberIds ? data.directionMemberIds : []
              that.pushMemberValues = directionMemberIds
              that.selectPushMemberIds = directionMemberIds
              that.selectPushMemberNames = data.directionMemberNames ? data.directionMemberNames : ''
            }
          } else {
            that.form.cooperationFlag = false
          }
          // 经验要求
          that.form.experienceIds = !data.experienceIds ? [] : data.experienceIds
          // 技能要求
          that.form.skillIds = !data.skillIds ? [] : data.skillIds
          // 推送范围
          that.form.filterDirectionType = !data.filterDirectionType ? '1' : data.filterDirectionType + ''
          that.form.recruitFlagType = data.recruitFlag + ''
          // 有使用招募员
          if (that.form.recruitFlagType === '1') {
            that.form.recruitFlag = true
            const recruitMemberIds = data.recruitMemberIds ? data.recruitMemberIds : []
            that.recruitMemberIds = recruitMemberIds
            that.selectRecruiterIds = recruitMemberIds
            that.recruiterValues = recruitMemberIds
            that.selectRecruiterNames = data.recruiterNames ? data.recruiterNames : ''
          } else {
            that.form.recruitFlag = false
          }
          // 微客要求
          that.hireNum = !data.hiredNum ? '' : data.hiredNum
          that.payDay1 = !data.payDay1 ? '' : data.payDay1
          that.payDay2 = !data.payDay2 ? '' : data.payDay2
          if (data.taskType + '' === '1') {
            that.isShow = '1'
          } else {
            that.isShow = '0'
          }
          const provinceCode = that.$utils.isExist(data.provinceCode) ? data.provinceCode : ''
          const cityCode = that.$utils.isExist(data.cityCode) ? data.cityCode : ''
          that.provinceCode = provinceCode
          that.cityCode = cityCode
          setTimeout(function() {
            that.changeCity()
          }, 1)

          if (that.$utils.isExist(data.onceSign) && data.onceSign === 1) {
            that.form.onceSign = true
          } else {
            that.form.onceSign = false
          }
        })
        this.$bus.$on('project.task.edit.taskType', function(data) {
          // taskType
          const taskType = data + ''
          if (taskType === '1') {
            that.isShow = '1'
          } else { // 协同任务
            that.isShow = '0'
          }
        })
      },
      changeCooperationFlagType() {

      },
      initAreaList() {
        listArea().then(response => {
          this.provinceList = response.data.provinceList
          this.cityList = response.data.cityList
        })
      },
      // 选择招募员
      selectRecruiter() {
        this.recruiterDialog = true
      },
      // 启动招募微客
      changeRecruitFlagType(val) {
        this.form.recruitFlagType = val
      },
      // 选择招募新微客
      submitRecruiter() {
        const recruiterValues = this.recruiterValues
        this.selectRecruiterIds = recruiterValues
        const recruiterMap = this.recruiterMap
        const recruiterNamesArray = []
        const recruitMemberIds = []
        recruiterValues.forEach(recruiterId => {
          const recruiter = recruiterMap.get(recruiterId)
          const username = recruiter.username
          recruiterNamesArray.push(username)
          recruitMemberIds.push(recruiterId)
        })

        const selectRecruiterNames = recruiterNamesArray.join(';')
        this.selectRecruiterNames = selectRecruiterNames
        //   recruitMemeberIds
        this.recruitMemberIds = recruitMemberIds
        this.recruiterDialog = false
      },
      // 加载招募员
      initlistRecruiterList() {
        const enterpriseId = this.getEnterpriseId()
        listRecruiterList(enterpriseId).then(response => {
          const array = response.data
          const data = []

          const recruiterMap = new Map()
          array.forEach((recruiter) => {
            data.push({
              label: recruiter.realname,
              key: recruiter.recruiterId
            })
            recruiterMap.set(recruiter.recruiterId, recruiter)
          })
          this.recruiterDatas = data
          this.recruiterMap = recruiterMap
        })
      },
      closeRecruiter() {
        this.recruiterDialog = false
      },
      closePushMember() {
        this.pushMemberDialog = false
      },
      submitPushMember() {
        const pushMemberValues = this.pushMemberValues
        this.selectPushMemberIds = pushMemberValues
        const pushMemberMap = this.pushMemberMap
        const pushMemberNamesArray = []
        const pushMemberIds = []
        pushMemberValues.forEach(pushMemberId => {
          const pushMember = pushMemberMap.get(pushMemberId)
          const nickname = pushMember.nickname
          pushMemberNamesArray.push(nickname)
          pushMemberIds.push(pushMemberId)
        })

        const selectPushMemberNames = pushMemberNamesArray.join(';')
        this.selectPushMemberNames = selectPushMemberNames
        this.pushMemberIds = pushMemberIds
        this.pushMemberDialog = false
      },
      changePushMemberType(type) {
        if (type === 1) {
          this.pushMemberType = 0
        } else {
          this.pushMemberType = 1
        }
      },
      selectPushMember() {
        this.pushMemberDialog = true
      },
      // 初始化微客
      initListPushMemberList() {
        const enterpriseId = this.getEnterpriseId()
        listPushMemberList(enterpriseId).then(response => {
          const array = response.data
          const data = []
          const pushMemberMap = new Map()

          array.forEach((pushMember) => {
            data.push({
              label: pushMember.nickname,
              key: pushMember.memberId
            })
            pushMemberMap.set(pushMember.memberId, pushMember)
          })
          this.pushMemberDatas = data
          this.pushMemberMap = pushMemberMap
        })
      }
    }
  }
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  import { listArea } from '@/api/area/area'
</script>
